<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">插值绑定</router-link> |
      <router-link to="/about">时钟</router-link>|
      <router-link to="/work-1">练习1</router-link>|
       <router-link to="/work-2">练习2</router-link>|
        <router-link to="/work-3">练习3</router-link>|
        <router-link to="/basket">菜篮子</router-link>|
      <router-link to="/Random">随机抽签</router-link>|
      <router-link to="/Book">书店结算</router-link>|
      <router-link to="/life">生命周期</router-link>|
      <router-link to="/book-shop">书店</router-link>|
      <router-link to="/tabs">Tab切换</router-link>|
       <router-link to="/event">事件和方法</router-link>|
      <router-link to="/weread">微信读书</router-link>|
      <router-link to="/contextmenu">右键菜单</router-link>|
      <router-link to="/form">表单</router-link>|
      <router-link to="/validate">表单校验</router-link>|
      <router-link to="/slider">滑块输入</router-link>|
      <router-link to="/computed">计算属性</router-link>|
      <router-link to="/watch">侦听器</router-link>|
      <router-link to="/album-list">唱片列表</router-link>|
      <router-link to="/scroll-load">滚动加载</router-link>|
      <router-link to="/pull-refresh">下拉刷新</router-link>|
      <router-link to="/v-model">组件的v-model</router-link>|
      <!-- <router-link to="/wishlist/index">心愿清单</router-link>| -->
      <!-- <router-link to="/life-box">生命周期1</router-link>| -->
      <router-link to="/main">管理后台</router-link>|
      <router-link to="/stock/list">库存管理</router-link>|
      <router-link to="/component">组件</router-link>
      <!-- router-link是vue-router路由库提供的组件,用来生成跳转链接,相当于a标签 to属性是定义路由时的path(#后面的字符串) -->
      <!-- <a href="#/main">管理后台</a> 没有高亮  router-link点击时自带高亮 -->
    </div>
    <!-- 实现路由切换需要容器 DOM的挂载点 -->
    <router-view />
    <favorite-box />
    <!-- <player :playing="$store.state.playing" :playlist="$store.state.playlist" :currentIndex="$store.state.currentIndex" @set-playing="$store.commit('setPlaying',$event)" @set-playlist="$store.commit('setPlaylist',$event)" @set-current-index="$store.commit('setCurrentIndex',$event)" /> -->
  </div>
</template>
<script>
import FavoriteBox from './components/FavoriteBox.vue'
export default {
  components:{FavoriteBox}
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-active {
      color: #42b983;
    }
  }
}
</style>
